<template>
  <div>
    <table>
      <thead>
        <tr height="50">
          <th width="120">
            <el-checkbox v-model="allchecked" @change="allchange"></el-checkbox
            >全选
          </th>
          <th width="400">商品信息</th>
          <th width="220">单价</th>
          <th width="220">数量</th>
          <th width="220">小计</th>
          <th width="200">操作</th>
        </tr>
        <tr v-for="item in cartlist" :key="item.id">
          <td class="checkboxs">
            <el-checkbox
              @change="handelchange"
              v-model="item.ischecked"
            ></el-checkbox>
          </td>
          <td class="message">
            <img :src="item.img" alt="" />
            <p class="name">{{ item.name }}</p>
          </td>
          <td class="price">￥{{ item.price }}</td>
          <td class="number">
            <el-input-number
              v-model="item.count"
              :min="1"
              :max="10"
              label="描述文字"
              size="mini"
            ></el-input-number>
          </td>
          <td class="subtotal">￥{{ item.price * item.count }}</td>
          <td class="operation">
            <p>移入收藏夹</p>
            <p>删除</p>
            <p>找相似</p>
          </td>
        </tr>
      </thead>
    </table>
    <div class="footer">
      <div class="left">
        <el-checkbox v-model="allchecked" @change="allchange"></el-checkbox>全选
        <p>删除商品</p>
        <p>移入收藏夹</p>
        <p>清空失效商品</p>
      </div>
      <div class="right">
        <p>共 {{ number }} 件商品，已选择 {{ checkednumber }} 件，商品合计：</p>
        <h2>￥{{ total }}</h2>
        <button @click="checkoutclick">立即下单</button>
      </div>
    </div>
  </div>
</template>

<script>
// import $http from "@/api/cart";
export default {
  name: "cartview",
  data() {
    return {
      cartlist: [
        {
          id: 0,
          count: 1,
          ischecked: true,
          name: "低帮城市休闲户外鞋天然牛皮COOLMAX纤维",
          price: "10",
          img: "https://yanxuan-item.nosdn.127.net/291d25493475684c324e9d3ca1f67325.png",
        },
        {
          id: 1,
          count: 2,
          ischecked: true,
          name: "低帮城市休闲户外鞋天然牛皮COOLMAX纤维",
          price: "20",
          img: "https://yanxuan-item.nosdn.127.net/79b020815834c30d7aaf191e5e59ef24.jpg",
        },
        {
          id: 2,
          count: 1,
          ischecked: false,
          name: "低帮城市休闲户外鞋天然牛皮COOLMAX纤维",
          price: "30",
          img: "https://yanxuan-item.nosdn.127.net/291d25493475684c324e9d3ca1f67325.png",
        },
      ],
      allchecked: false,
    };
  },
  computed: {
    // 总价
    total() {
      return this.cartlist
        .filter((item) => item.ischecked)
        .reduce((a, b) => (a += b.price * b.count), 0);
    },
    //商品个数
    number() {
      return this.cartlist.reduce((a, b) => (a += b.count), 0);
    },
    // 选中个数
    checkednumber() {
      return this.cartlist.filter((item) => item.ischecked).length;
    },
  },
  methods: {
    // 单选事件
    handelchange() {
      // 全为真为真
      let checked = this.cartlist.every((item) => {
        return item.ischecked == true;
      });
      this.allchecked = checked;
    },
    // 全选事件
    allchange(e) {
      this.cartlist.forEach((item) => {
        item.ischecked = e;
      });
    },
    // 跳转下单页
    checkoutclick() {
      this.$router.push("/checkout");
    },
  },
  // 购物车列表数据
  // async created() {
  //   let res = await $http.cartlist();
  // },
};
</script>

<style lang="scss" scoped>
.el-checkbox {
  zoom: 130%;
}
table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  tr {
    border-bottom: 1px solid #f5f5f5;
    .checkboxs {
      .el-checkbox {
        margin-right: 50px;
      }
    }
    .message {
      width: 350px;
      display: flex;
      .name {
        height: 20px;
        margin: 30px 0 0 10px;
        color: #666666;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        display: -webkit-box;
      }
    }
    .price {
      color: #666;
    }
    .subtotal {
      color: red;
    }
    .operation {
      p {
        font-size: 14px;
        &:nth-child(2) {
          color: #27ba9b;
          margin: 6px 0;
        }
      }
    }
    td {
      text-align: center;
      .el-checkbox {
        margin-left: 25px;
      }
      img {
        width: 100px;
        height: 100px;
        padding: 10px 0;
      }
    }
  }
  th {
    color: #666666;
    font-weight: 500;
    .el-checkbox {
      margin-right: 5px;
    }
  }
}
.footer {
  width: 100%;
  height: 80px;
  background: white;
  margin: 20px 0;
  display: flex;
  align-items: center;
  display: flex;
  justify-content: space-between;
  .left {
    display: flex;
    .el-checkbox {
      margin: 0 5px;
      margin-left: 25px;
    }
  }
  .right {
    display: flex;
    align-items: center;
    h2 {
      color: red;
    }
    button {
      width: 180px;
      height: 50px;
      background: #27ba9b;
      color: white;
      border: none;
      border-radius: 10px;
      margin: 0 20px;
    }
  }
  p {
    color: black;
    margin-left: 20px;
  }
}
</style>